
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'img.jsp' starting page</title>
     <meta  http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  <style>
  body{
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  position: relative;
  }
  #dom{
  width: 99%;
  height: 100%;
/*   border: 1px solid #000; */
  }
  .left{
  width: 30%;
  height: 100%;
  border-radius:20px;
  border-right:2px solid rgba(204,204,204,.5);
  float: left;
  border: 1px solid #000;
  }
  .right{
  width: 30%;
  height: 100%;
  border-radius:20px;
  border-left:2px solid rgba(204,204,204,.5);
  float: right;
  border: 1px solid #000;
  }
 .top{
  width: 38%;
  height: 40%;
  margin-left: 5px;
  border: 1px solid rgba(204,204,204,.5);
  border-radius:20px;
  float: left;
  border: 1px solid #000;
  }
  .bottom{
  width: 38%;
  height: 60%;
  margin-left: 5px;
  margin-top: 2%;
  border: 1px solid rgba(204,204,204,.5);
  border-radius:20px;
  float: left;
  background-image:url("img/1111.png"); 
  background-position: center;
    background-repeat: no-repeat;
  background-size:cover;
  font-family: "宋体";
  
  }
  .img{
  width: 60%;
  height: 50%;
  margin: 0% auto;
  border:1px solid rgba(204,204,204,.5);
  border-radius:20px;
  background-image:url("img/1111.png"); 
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  border: 1px solid #000;
  }
  .img img{
  display:block;
  width: 38%;
  height: 60%;
  margin: 5% 20%;
  border-radius:50%;
  border: 1px solid #000;
  }
  .left_top{
  width: 73%;
  height: 30%;
  position: relative;
  background-image:url("img/1111.png"); 
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  right:73%;
  border: 1px solid #000;
  }
  .left_bot{
  position: absolute;
  width: 20%;
  height: 75%;
  bottom: -75%;
  background-image:url("img/1111.png"); 
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  border: 1px solid #000;
  }
  .left_bo{
  position: absolute;
  width: 6%;
  height: 15%;
  bottom: 60%;
  left: -15%;
  background-image:url("img/1111.png"); 
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  border: 1px solid #000;
  }
  .left_or{
  position: absolute;
  width: 8%;
  height: 16%;
  bottom: -16%;
  left: 17%;
  background-image:url("img/1111.png"); 
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  border: 1px solid #000;
  }
  .right_top{
  width: 10%;
  height: 12%;
  position: absolute;
  top: -10%;
  right: 19%;
  transform:rotate(-23deg);
  background-image:url("img/1111.png"); 
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  border: 1px solid #000;
  }
  .right_bo input[type='button']{
	outline-style:none;
	text-align:center;
	cursor:pointer;
	border-radius:5px;
	border: 0px solid #99CCFF;
	background-color: rgba(72, 201, 176,0);
  width: 70%;
  height: 20%;
  margin-left: 10%;
  margin-top: 45%;
  background-size:cover;
  border: 1px solid #000;
  }
  a{
  display:block;
  text-decoration: none;
  text-align:center;
	border-radius:5px;
	border: 0px solid #99CCFF;
	background-color: rgba(72, 201, 176,0);
  width: 70%;
  height: 20%;
  margin-left: 10%;
  margin-top: 45%;
  font-size:1em;
  color:#000;
  background-size:cover;
  border: 1px solid #000;
  }
  .right_bot{
  width: 8%;
  height: 27%;
  background-image:url("img/1111.png"); 
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0%;
  right: 20%;
  background-size:cover;
  border: 1px solid #000;
  }
  .right_bott{
  width: 16%;
  height: 30%;
  background-image:url("img/1111.png"); 
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -30%;
  right: 4%;
  background-size:cover;
  border: 1px solid #000;
  }
  .right_bo{
  width: 12%;
  height: 25%;
  background-image:url("img/1111.png"); 
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 2%;
  right: -12%;
  background-size:cover;
  border: 1px solid #000;
  }
  </style>
  <body>
  <nav >
 
   	<div id="dom">
   	<div class="left">
   	<div class="left_top"></div>
   	<div class="left_bot"></div>
   	<div class="left_bo"></div>
   	<div class="left_or"></div>
   	</div>
   	<div class="right">
   	<div class="right_top"></div>
   	<div class="right_bo"> <a  href="girl.html">极致的色彩</a></div>
   	<div class="right_bot"></div>
   	<div class="right_bott"></div>
   	</div>
   	<div class="top">
   	<div class="img"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3667523699,2084253771&fm=27&gp=0.jpg"></div>
   	</div>
   	<div class="bottom">
   	
	<span style="font-size: 20px;font-family: '宋体';display: block;margin-top: 20%;">简单的线条，极致的色....算了懒得写了......</span>
   	
   	</div>
   	</div>
   	</nav>
  </body>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  $(".left_top").animate({right:"0"});
  $(".left_bot").animate({bottom:"0"});
  $(".left_bo").animate({left:"15%"});
  $(".left_or").animate({bottom:"0"});
  
  $(".right_top").animate({top:"10%"});
  $(".right_bo").animate({right:"2%"});
  $(".right_bot").animate({right:"15%"});
  $(".right_bott").animate({bottom:"30%"});
  // margin: 9% auto;
  $(".img").animate({margin:"9% auto"});
  
  </script>
</html>
